import { defineComponent, inject, reactive, watch } from 'vue'
import "./attriOperBlock.css"
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElColorPicker, ElSelect, ElOption } from 'element-plus'
export default defineComponent({
    props: {
        block: { type: Object },
        data: { type: Object },
        updateBlock: { type: Function },
        updateContainer: { type: Function }
    },
    setup(props) {
        // 组件的配置信息
        const configData = inject('config')
        // 
        const state = reactive({
            editData: {},
        })
        const setState = () => {
            if (!props.block) {
                state.editData = JSON.parse(JSON.stringify(props.data.container))
            } else {
                state.editData = JSON.parse(JSON.stringify(props.block))
            }
        }
        // 饮用
        const apply = () => {
            if (!props.block) {                
                props.updateContainer({ ...props.data, container: state.editData })
            } else {
                props.updateBlock(props.block, state.editData)
            }
        }
        watch(() => props.block, setState, { immediate: true })
        return () => {
            let content = []
            if (!props.block) {
                content.push(
                    <>
                        <ElFormItem label="画布宽度">
                            <ElInputNumber v-model={state.editData.width}></ElInputNumber>
                        </ElFormItem>
                        <ElFormItem label="画布高度">
                            <ElInputNumber v-model={state.editData.height}></ElInputNumber>
                        </ElFormItem>
                    </>
                )
            } else {
                const component = configData.componentMap[props.block.key]
                const componentConfig = Object.entries(component.config).map(([name, config]) => {
                    const componentMap = {
                        input: () => <ElInput v-model={state.editData.config[name]}></ElInput>,
                        color: () => <ElColorPicker v-model={state.editData.config[name]}></ElColorPicker>,
                        bgcolor: () => <ElColorPicker v-model={state.editData.config[name]}></ElColorPicker>,
                        radius: () => <ElInputNumber v-model={state.editData.config[name]}></ElInputNumber>,
                        select: () => <ElSelect v-model={state.editData.config[name]}>
                            {config.options.map(option => {
                                return <ElOption value={option.value} label={option.label}></ElOption>
                            })}
                        </ElSelect>
                    }
                    const renderComponent = componentMap[config.type];

                    if (typeof renderComponent !== 'function') {
                        console.error(`Unknown component type: ${config.type}`);
                        return null;
                    }

                    return (
                        <ElFormItem key={name} label={config.label}>
                            {renderComponent()}
                        </ElFormItem>
                    );
                })
                content.push(componentConfig)
            }
            return <ElForm labelPosition="top" style="padding:4px;">
                {content}
                < div class="footer" >
                    <div class="btn" onClick={() => apply()}>应用</div>
                    <div class="btn" onClick={setState}>默认</div>
                </div >
            </ElForm >
        }
    }
})